import React, { useEffect, useState } from "react";
import { NavBar, Space, Tabs, Toast } from "antd-mobile";
import { BellOutline, SearchOutline } from "antd-mobile-icons";
import PatintPages from "components/Lzk_components/PatintPages";
import { useDispatch, useSelector } from "react-redux";
import { patientTab, patientTabs } from "store/Lzk_Store/Patint";
import "./index.scss";

const Index = () => {
  const dispatch = useDispatch<any>();
  const tablist = useSelector(patientTabs);

  const [activeKey, setActiveKey] = useState<string>("7");

  //导航栏右侧
  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ "--gap": "16px" }}>
        <BellOutline
          onClick={() => {
            Toast.show({
              content: "跳转消息页",
            });
          }}
        />
      </Space>
    </div>
  );
  //导航栏点击事件

  useEffect(() => {
    dispatch(patientTab());
  }, [dispatch]);

  const handchange = (key: string) => {
    setActiveKey(key);
  };

  const back = () => {
    Toast.show({
      content: "返回上一页",
    });
  };

  const search = () => {
    Toast.show({
      content: "跳转搜索页",
    });
  };
  return (
    <div className="patient">
      <div className="top">
        <NavBar right={right} onBack={back}></NavBar>
      </div>
      <div className="main">
        <div className="main-top">
          <div className="customHeader">
            <Tabs
              defaultActiveKey="1"
              className="tabs"
              activeKey={activeKey}
              onChange={handchange}
            >
              {(tablist || []).map((item: any, index: number) => {
                return <Tabs.Tab title={item.departmentName} key={item.id} />;
              })}
            </Tabs>
            <SearchOutline className="moreIcon" onClick={search} />
          </div>
        </div>
        <div className="main-main">
          <PatintPages id={activeKey} />
        </div>
      </div>
    </div>
  );
};
export default Index;
